<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="min-h-screen bg-primary">
    <header class="fixed top-0 left-0 right-0 z-50 bg-secondary bg-opacity-90 backdrop-blur-sm">
      <nav class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <router-link to="/" class="text-2xl font-pacifico text-accent">LG_Demo</router-link>
          <div class="flex space-x-4">
            <router-link to="/" class="text-accent hover:text-white transition-colors">首页</router-link>
            <router-link to="/littleus" class="text-accent hover:text-white transition-colors">点点滴滴</router-link>
            <router-link to="/loveimg" class="text-accent hover:text-white transition-colors">恋爱相册</router-link>
            <router-link to="/messages" class="text-accent hover:text-white transition-colors">祝福留言</router-link>
            <router-link to="/list" class="text-accent hover:text-white transition-colors">恋爱事件</router-link>
          </div>
        </div>
      </nav>
    </header>

    <main class="container mx-auto px-4 pt-20">
      <router-view></router-view>
    </main>

    <footer class="bg-secondary mt-8">
      <div class="container mx-auto px-4 py-6">
        <div class="flex flex-wrap justify-between items-center">
          <div class="text-accent text-sm">
            © 2025 LG_NewUi Web All Rights Reserved.
          </div>
          <div class="flex space-x-4">
            <a href="#" class="text-accent hover:text-white transition-colors">
              <i class="fab fa-github"></i>
            </a>
            <a href="#" class="text-accent hover:text-white transition-colors">
              <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="text-accent hover:text-white transition-colors">
              <i class="fab fa-instagram"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
